<template>
  <el-card class="m-8">
    <section class="mb-10 flex flex-col">
      <h1 class=" text-2xl my-8">奖励配置</h1>
      <span>触发行为：每次投入游戏金额（折算成能量）随机走下方配置进入能量池</span>
      <span>配置说明：概率配置之和不可大于100%，不可低于0%。</span>
    </section>

    <el-form ref="addForm" :model="dynamicValidateForm" :rules="rules">

      <el-form-item
        label="状态"
        prop="is_open"
      >
        <el-radio-group v-model="dynamicValidateForm.is_open">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>

    <div class="clearfix">
      <el-button type="primary" @click="handleAddSave('addForm')">保存</el-button>
      <el-button type="primary" @click="addItem">新增</el-button>

      <!--      <el-button type="danger" @click="detailFormVisible=false">取消</el-button>-->
    </div>


    <el-table :data="detailTableList" align="center" border class="mt-4" stripe>

      <el-table-column
        label="序号"
        type="index"
        width="50"
      >
      </el-table-column>
      <el-table-column label="能量增加比例" prop="coin_percent">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.coin_percent"
            clearable
            type="text"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="概率" prop="percent">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.percent"
            clearable
            type="text"
          >
            <template slot="append">%</template>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" prop="created_at">
        <template slot-scope="scope">
          <el-popconfirm
            cancel-button-text="不用了"
            class="mr-5"
            confirm-button-text="好的"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除吗？"
            @confirm="delRow(scope.$index)"
          >
            <el-button slot="reference" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>

  </el-card>
</template>

<script>
import { giftList, saveEnergyConfig } from '../../api/guardActivity/energyConfig'

export default {
  name: 'energyConfig',
  data() {
    return {
      detailTableList: [],
      dynamicValidateForm: {
        is_open: ''
      },
      rules: {
        is_open: [{ required: true, message: '请选择状态', trigger: 'change' }]
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {

      const { data } = await giftList()
      this.detailTableList = data.data
      this.dynamicValidateForm.is_open = data.status
    },
    async delRow(index) {
      this.detailTableList.splice(index, 1)
    },
    handleAddSave(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let count = 0
          this.detailTableList.forEach((item) => {
            count += parseInt(item.percent)
          })
          console.log(count)
          if (count > 100 || count < 0) {
            this.$message.warning('请检查填写概率是否正确')

          } else {
            let obj = {
              data: this.detailTableList,
              status: this.dynamicValidateForm.is_open
            }
            saveEnergyConfig(obj).then(res => {
              if (res.code === 200) {
                this.initData()
                this.dialogFormVisible = false
                this.$notify({
                  type: 'success',
                  message: '操作成功',
                  position: 'bottom-right',
                  showClose: false,
                  duration: 3000
                })
              }
            })
          }
        }
      })
    },
    addItem() {
      this.detailTableList.push({
        coin_percent: '',
        percent: '',
        status: 1
      })
    }

  }
}
</script>

<style scoped>

</style>
